<template>
    <div class="app-container home-page">
      <div class="page-top">
        <div class="top-item">
            <div class="item-info">有效线索数</div>
            <div class="item-content">{{ topCount1 }}</div>
        </div>
        <div class="top-item">
            <div class="item-info">客户跟进数</div>
            <div class="item-content">{{ topCount2 }}</div>
        </div>
        <div class="top-item">
            <div class="item-info">商机跟进数</div>
            <div class="item-content">{{ topCount2 }}</div>
        </div>
      </div>
      <div class="page-center">
        <div class="center-item">
            <div class="item-head">区域客户统计</div>
            <div class="item-content">
                <echarts-bar :dataList="areaCustomerCount" title="区域客户统计"></echarts-bar>
            </div>
        </div>
        <div class="center-item">
            <div class="item-head">个人跟进统计</div>
            <div class="item-content">
                <echarts-bar :dataList="personCustomerCount" title="个人跟进统计"></echarts-bar>
            </div>
        </div>
      </div>
      <div class="page-bottom">
        <div class="bottom-item">
            <div class="item-head">线索有效率占比</div>
            <div class="item-content">
                <echarts-pie :dataList="pieData1" title="线索有效率占比"></echarts-pie>
            </div>
        </div>
        <div class="bottom-item">
            <div class="item-head">客户跟进方式统计</div>
            <div class="item-content">
                <echarts-pie :dataList="pieData2" title="客户跟进方式统计"></echarts-pie>
            </div>
        </div>
        <div class="bottom-item">
            <div class="item-head">区域客户占比统计</div>
            <div class="item-content">
                <echarts-pie :dataList="pieData3" title="区域客户占比统计"></echarts-pie>
            </div>
        </div>
      </div>
    </div>
</template>

<script>
import EchartsBar from "./components/echartsBar.vue";
import EchartsPie from "./components/echartsPie.vue";
import request from "@/utils/request"
export default {
    name:"home",
    components:{
        EchartsBar,
        EchartsPie
    },
    data(){
        return {
            topCount1:0,
            topCount2:0,
            areaCustomerCount:{
                customer:[],
                dealCustomer:[]
            },
            personCustomerCount:[],
            pieData1:[{name:"有效线索",value:0},{name:"无效线索",value:0}],
            pieData2:[],
            pieData3:[],
            timer:null
        }
    },
    mounted(){
        this.initData();
        this.timer = setInterval(() => {
            this.initData();
        },1000 * 60);
    },
    beforeDestory(){
        clearInterval(this.timer);
    },
    methods:{
        //线索跟进数
        getCount1(){
            request({url:"/crm/customer/followUpAccount",method:"get"}).then(response => {
                if(response.code === 200){
                    this.topCount1 = response.data.effectiveCount;
                    this.pieData1[0].value = response.data.effectiveCount;
                    this.pieData1[1].value = response.data.allCount - response.data.effectiveCount;
                }
                console.log('线索跟进数',response);
            }).catch(error => {
                console.log(error);
            })
        },
        //客户、商机跟进数
        getCount2(){
            request({url:"/crm/customer/customerAccount",method:"get"}).then(response => {
                if(response.code === 200){
                    this.topCount2 = response.data.countLastUpdateRecord;
                }
                console.log('客户、商机跟进数',response);
            }).catch(error => {
                console.log(error);
            })
        },
        //区域统计
        getCount3(){
            request({url:"/crm/customer/regionalProportion2",method:"get"}).then(response => {
                if(response.code === 200){
                    const customer = response.data.regionStatistics;
                    const dealCustomer = response.data.regionStatistics2;
                    const tmpList = new Array();
                    const tmpList2 = new Array();
                    for(let i = 0; i < customer.length; i ++){
                        const { region,customerStatus } = customer[i];
                        let tmp = region.match(/([^,]+市)/g);
                        const obj = {region:tmp ? tmp[0] : '',count:customerStatus};
                        tmpList.push(obj);
                    }
                    for(let j = 0; j < dealCustomer.length; j ++){
                        const { region,customerStatus } = dealCustomer[j];
                        let tmp = region.match(/([^,]+市)/g);
                        const obj = {region:tmp ? tmp[0] : '',count:customerStatus};
                        tmpList2.push(obj);
                    }
                    this.areaCustomerCount.customer = tmpList;
                    this.areaCustomerCount.dealCustomer = tmpList2;
                }
                console.log('区域跟进统计',response);
            }).catch(error => {
                console.log(error);
            })
        },
        //个人跟进统计
        getCount4(){
            request({url:"/crm/customer/findByLimit",method:"get"}).then(response => {
                if(response.code === 200){
                    const tmpList = new Array();
                    const customer = response.data.regionStatistics;
                    const dealCustomer = response.data.regionStatistics2;
                    for(let i = 0; i < customer.length; i ++){
                        const { owner,customerStatus } = customer[i];
                        const obj = {owner,customer:customerStatus,dealCustomer:0};
                        tmpList.push(obj);
                    }
                    for(let j = 0; j < dealCustomer.length; j ++){
                        const { owner,customerStatus } = dealCustomer[j];
                        let index = tmpList.findIndex(item => {
                            return item.owner == owner;
                        })
                        if(index === -1){
                            const obj = {owner,customer:0,dealCustomer:customerStatus};
                            tmpList.push(obj);
                        } else {
                            tmpList[index].dealCustomer = customerStatus;
                        }
                    }
                    this.personCustomerCount = tmpList;
                }
                console.log('个人跟进统计',response);
            }).catch(error => {
                console.log(error);
            })
        },
        //客户跟进方式
        getCount5(){
            request({url:"/crm/customer/sourceOfCluesSource",method:"get"}).then(response => {
                if(response.code === 200){
                    const { coldCall,faceVisit,networkSource,telephoning } = response.data;
                    const tmp = [
                        {name:"陌生拜访",value:coldCall},
                        {name:"当面拜访",value:faceVisit},
                        {name:"网络来源",value:networkSource},
                        {name:"电话沟通",value:telephoning}
                    ];
                    this.pieData2 = tmp;
                }
                console.log('客户跟进方式统计',response);
            }).catch(error => {
                console.log(error);
            })
        },
        //商机跟进统计
        getCount6(){
            request({url:"/crm/customer/area",method:"get"}).then(response => {
                if(response.code === 200){
                    const tmp = response.data.map(item => {
                        let deal = item.region.match(/([^,]+市)/g);
                        return {
                            count:item.count,
                            region: deal ? deal[0] : "其它"
                        }
                    });
                    this.pieData3 = tmp;
                }
                console.log('商机跟进统计',response);
            }).catch(error => {
                console.log(error);
            })
        },
        initData(){
            this.getCount1();
            this.getCount2();
            this.getCount3();
            this.getCount4();
            this.getCount5();
            this.getCount6();
        }
    }

}
</script>

<style lang='scss' scoped>
.home-page{
    width:100%;
    height:100vh;
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    background: #f1f2f7;
    .page-top{
        flex:2;
        margin-bottom: 10px;
        display: flex;
        justify-content: space-between;
        .top-item{
            width: 33%;
            height: 100%;
            padding: 10px;
            box-sizing: border-box;
            background: #fff;
            border-radius: 10px;
            display: flex;
            flex-direction: column;
            .item-info{
                width: 100%;
                height: 20%;
                font-size: 12px;
            }
            .item-content{
                width: 100%;
                height: 80%;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 40px;
                font-weight: bold;
            }
        }
    }
    .page-center{
        flex:5;
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
        .center-item{
            width: 49.7%;
            height: 100%;
            padding: 10px;
            box-sizing: border-box;
            background: #fff;
            border-radius: 10px;
            display: flex;
            flex-direction: column;
            .item-head{
                width:100%;
                height: 8%;
                font-size: 12px;
            }
            .item-content{
                width: 100%;
                height: 92%;
            }
        }
    }
    .page-bottom{
        flex:3;
        display: flex;
        justify-content: space-between;
        .bottom-item{
            width: 33%;
            height: 100%;
            padding: 10px;
            box-sizing: border-box;
            background: #fff;
            border-radius: 10px;
            display: flex;
            flex-direction: column;
            .item-head{
                width:100%;
                height: 8%;
                font-size: 12px;
            }
            .item-content{
                width: 100%;
                height: 92%;
            }
        }
    }
}
</style>